<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>过滤选择器-子元素</title>
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
	$(function() {
		//1.:nth-child 匹配其父元素下的第N个子或奇偶元素
		//':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。
		//:nth-child从1开始的，而:eq()是从0算起的！可以使用:
		//nth-child(even)
		//:nth-child(odd)
		//:nth-child(3n)
		//:nth-child(2)
		//:nth-child(3n+1)
		//:nth-child(3n+2)
		$('li:nth-child(2)').css("backgroundColor","lightblue");
		//2.:first-child 匹配第一个子元素
		$('li:first-child').css("backgroundColor","lightgrey");
		//3.:last-child 匹配第后一个子元素
		$('li:last-child').css("backgroundColor","yellow");
		//4.::only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
		$('li:only-child').css("backgroundColor","yellow");
	});
</script>
</head>
<body>
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
</body>
</html>